<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>类样式操作</title>

		<style type="text/css">
			.red {
				color: red;
			}
			
			.green {
				color: green;
			}
			
			.blue {
				color: blue;
			}
			
			.underline {
				color: underline;
			}
		</style>
		
		
		
		
	</head>

	<body>

		<ul>
			<li>前端</li>
			<li class="blue">java</li>
			<li>JavaScript</li>
			<li class="red">Object-C</li>
		</ul>
		<input type="button" id="add" value="为第一个li元素添加样式" />
		<input type="button" id="remove" value="为第二个li元素添加样式" />
		<input type="button" id="toggle" value="为第三个li元素添加样式" />
		<input type="button" id="contain" value="为第四个li元素添加样式" />


		<script type="text/javascript">
			window.onload = function() {
				// add: 为元素添加指定名称的样式,一次只能添加一个样式
				document.querySelector("#add").onclick = function() {
					// classList: 当前元素的所有样式列表-数组
					document.querySelector("li").classList.add("red");
					document.querySelector("li").classList.add("underline");

					// 获取样式
					var result = document.querySelector("li").classList.item(0);
					console.log(result);
				}
				// remove: 为元素移除指定名称的样式(不是移除class属性),一次也是只能移除一个
				document.querySelector("#remove").onclick = function() {
					
//					var isTrue = document.querySelector("li").classList.contains("blue");
					document.querySelector(".blue").classList.remove("blue");
//					if (isTrue) {
//						document.querySelector(".blue").classList.remove("blue");
//					} else{
//						console.log("已经没有了````")
//					}
					
				}

				// toggle: 为元素切换样式,无则添加,有则移除
				document.querySelector("#toggle").onclick = function() {
					document.querySelectorAll("li")[2].classList.toggle("green");
				}

				// contain: 判断是否包含某个样式,返回true/false
				document.querySelector("#contain").onclick = function() {
					var isTrue = document.querySelectorAll("li")[3].classList.contains("red");

					console.log(isTrue)
				}
			}

			// 获取第一个li标签

			/**
			 * getElementsByTagName获取的是数组
			 * 索引: 不直观,一般数据都是根据后台来动态获取,前台生成添加
			 * */
			var cli = document.getElementsByTagName("li")[0]
			console.log(cli)

			/**
			 * query: 查询 
			 * Selector: 选择器 
			 * querySelector: 获取满足条件的第一个元素
			 * 参数要求: 如果是类选择器,必须添加".",如果是id选择器,必须添加"#"...否则会当成标签处理
			 * */
			var javaLi = document.querySelector("li");
			console.log(javaLi)

			var allLi = document.querySelectorAll("li");
			console.log(allLi)
		</script>

	</body>

</html>